<!DOCTYPE html> 
<html> 
	<head>
		<!-- required -->
		<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">

		<!-- for DEMO UI use only -->
		<link href="../../res/bootstrap.min.css" rel="stylesheet">
		<link href="../../res/bootstrap-responsive.min.css" rel="stylesheet">
		<link href="../../res/styles.css" rel="stylesheet">
		<!-- -->
		
	</head>
	<body> 
		<!-- required -->
		<applet name="fsa" code="fsa.class" archive="../../fsa.jar" style="position:absolute; left:-1px;" height="1" width="1"></applet> 

		<!-- ideally no user interface will be written in startup html directly
		however, just in case you want to write, put it in a div named "body", this will
		ensure that this UI is moved to a logical place in overall page structure so UI is 
		not distorted drastically -->
		<div id="body">
		
			<!-- top bar -->
			<div class="navbar">
			  <div class="navbar-inner">
				<div class="container-fluid">
				  <a class="brand">Features - Ultimate extensibility.</a>
				  <div class="pull-right">
					<a class="navbar-text noline" href="..\..\basic\features" fluid-noIntercept target="_blank" title="Open source folder"><i class="icon-folder-open"></i> Source</a>
					<a class="navbar-text noline" href="http://docs.fluidjs.vikasburman.com/2013/01/features.html" fluid-noIntercept target="_blank" title="Open example page"><i class="icon-file"></i> Docs</a>
				  </div>
				</div>
			  </div>
			</div>
			<!-- -->

			<div class="container-fluid">
				<div class="row-fluid">

					<!-- side bar -->
					<div class="span3"><div class="well sidebar-nav">
						<!-- sections -->
						<div class="accordion" id="accordion">
						  <!-- showcase -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec1" fluid-noIntercept>
							<i class="icon-comment"></i> Showcase
						  </a></div><div id="sec1" class="accordion-body collapse in"><div class="accordion-inner">
							<p><i class="icon-cog"></i> This shows how plugins can be extended using features.</p>
							<p><i class="icon-cog"></i> This shows that even features can be extended using other features.</p>
							<p><i class="icon-cog"></i> It also shows how features can be loaded dynamically on-demand (without defining in startup html).</p>
						  </div></div></div>
						  <!-- -->
						  <!-- observations -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec2" fluid-noIntercept>
							<i class="icon-eye-open"></i> Observations
						  </a></div><div id="sec2" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> See the feature lifecycle events log.</p>
							<p><i class="icon-cog"></i> See the loaded features list.</p>
							<p><i class="icon-cog"></i> See the loaded plugins and their features list.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- Activities -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec3" fluid-noIntercept>
							<i class="icon-hand-right"></i> Activities
						  </a></div><div id="sec3" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> Have a look at <span class="file">app-features.html</span> and <span class="file">*.js</span> files.</p>
							<p><i class="icon-cog"></i> Open developer tools for your browser and explore the object 
							structure of <span class="object">$f.utils</span>, <span class="object">$f.myPlugin1</span> and <span class="object">$f.myPlugin2</span> to see how features are merged into them.</p>
							<p><i class="icon-cog"></i> Load features dynamically by a simple call; have a look at <span class="object">$f.myPlugin2.loadFeature</span> method.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- Takeaways -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec4" fluid-noIntercept>
							<i class="icon-shopping-cart"></i> Takeaways
						  </a></div><div id="sec4" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> <span class="file">{feature}.debug.js</span> files are standard JavaScript file that needs to be added in html page after framework JS.</p>
							<p><i class="icon-cog"></i> Feature JS can be loaded before or after the target plugins on which they need to be added.</p>
							<p><i class="icon-cog"></i> A feature has a lifecycle.</p>
							<p><i class="icon-cog"></i> Each feature has a unique id.</p>
							<p><i class="icon-cog"></i> Features can be added to one or more plugins by type or name or both.</p>
							<p><i class="icon-cog"></i> Plugins can interact with features and vice-versa.</p>
							<p><i class="icon-cog"></i> Features can be loaded dynamically on-demand.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- Notes -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec5" fluid-noIntercept>
							<i class="icon-ok"></i> Notes
						  </a></div><div id="sec5" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> Dynalically loading of features is not available in 'kernel' package of framework.</p>
						  </div></div></div>
						  <!-- -->
						</div>
						<!-- -->
					</div></div>
					<!-- -->
					
					<!-- right half where the action is -->
					<div class="span9"><div class="row-fluid">
							
						<!-- tabs -->
						<ul class="nav nav-tabs">
							<li id="t1"><a href="#" onclick="javascript: return showTab('t1', 'lifecycle');">Lifecycle</a></li>
							<li id="t2"><a href="#" onclick="javascript: return showTab('t2', 'featureslist');">Features List</a></li>
							<li id="t3"><a href="#" onclick="javascript: return showTab('t3', 'pluginslist');">Plugins List</a></li>
							<li id="t4" class="active"><a href="#" onclick="javascript: return showTab('t4', 'hello');">Hello, World! (from Features)</a></li>
							<li id="t5"><a href="#" onclick="javascript: return showTab('t5', 'dynamic');">Dynamic Extend</a></li>
						</ul>
						<!-- -->
						
						<!-- lifecycle events log -->
						<div id="lifecycle" style="display: none;">
						</div>
						<!-- -->
						
						<!-- features list -->
						<div id="featureslist" style="display: none;">
						</div>						
						<!-- -->
						
						<!-- plugins list -->
						<div id="pluginslist" style="display: none;">
						</div>						
						<!-- -->
						
						<!-- feature test -->
						<div id="hello">
							<span class="label label-info">myFeature1</span><br />
							<i class="icon-info-sign"></i> Shows hello from myFeature1 when myFeature3 is not loaded, else hello comes from myFeature3. <br /><br />
							<a href="#" class="btn" onclick="javascript: $f.myPlugin1.hello(); return false;">$f.myPlugin1.hello();</a><br /><br /><br />
							<span class="label label-info">myFeature2</span><br />
							<i class="icon-info-sign"></i> Shows hello from myFeature2 but all in different plugin's contexts. <br /><br />
							<a href="#" class="btn" onclick="javascript: $f.myPlugin2.hello(); return false;">$f.myPlugin2.hello();</a>
							<a href="#" class="btn" onclick="javascript: $f.utils.hello(); return false;">$f.utils.hello();</a>
							<a href="#" class="btn" onclick="javascript: $f.environment.hello(); return false;">$f.environment.hello();</a>
						</div>						
						<!-- -->
						
						<!-- dynamic extend -->
						<div id="dynamic" style="display: none;">
							<h4>Load a feature programatically</h4>
							<span class="label label-important">Before</span><br />
							<i class="icon-info-sign"></i> Check out the list, myFeature3 is not there. <br /><br />
							
							<a href="#" class="btn" onclick="javascript: $f.myPlugin2.loadFeature(); return false;">$f.myPlugin2.loadFeature();</a> <br /><br />
							
							<span class="label label-important">After</span><br />
							<i class="icon-info-sign"></i> Check the list again, myFeature3 is loaded now. <br />
							<i class="icon-info-sign"></i> Also have a look at the lifecycle events of this newly loaded feature.<br />
							<i class="icon-info-sign"></i> See, myFeature1's hello message is changed now.<br />
							<i class="icon-info-sign"></i> Press <span class="object">F5</span> to refresh browser page. <br />
							<i class="icon-info-sign"></i> Explore again and you will see that myFeature3 is gone.<br /><br /><br />
							
							<h4>Load a plugin programatically</h4>
							<i class="icon-info-sign"></i> myFeature3 is configured to load on myPlugin1, myPlugin3. myPlugin1 is already 
							loaded via static reference, but myPlugin3 can be loaded dynamically. Whether the feature-target plugin is 
							loaded before feature is loaded or after feature is loaded, feature do get attached. Try this by loading myPlugin3
							once before myFeature3 and (after page refresh) once after loading myFeature3.<br /><br />

							<a href="#" class="btn" onclick="javascript: $f.myPlugin2.loadPlugin(); return false;">$f.myPlugin2.loadPlugin();</a> <br /><br />

						</div>						
						<!-- -->
						
					</div></div>
					<!-- -->
					
				</div>	
			</div>
			
		</div>
		
		<!-- refer framework JS (as last item in body) -->
		<script type="text/javascript" src="../../fluid.debug.js"></script> 	
		
		<!-- for DEMO UI use only -->
		<script src="../../res/bootstrap.min.js"></script>
		<script src="../../res/general.js"></script>
		<!-- -->
		
		<!-- statically loaded plugins and features (NOTE: this is defined after the framework definition) -->
		<script type="text/javascript" src="myPlugin1.debug.js"></script>
		
		<!-- statically loaded features -->
		<script type="text/javascript" src="myFeature1.debug.js"></script> 
		<script type="text/javascript" src="myFeature2.debug.js"></script> 	
		<!-- -->
	
		<!-- statically loaded plugins (NOTE: this is defined after the feature, yet feature will attach to it) -->
		<script type="text/javascript" src="myPlugin2.debug.js"></script> 
		<!-- -->
		
	</body> 
</html> 
